<template>
	<view class="contract_wrapper" >
		<view class="cont_filterModel" >
			<filterModel
			 v-if="showFilter"
			 :disabled="disabledFilter"
			 :all="allFilter" 
			 :parentObj="parentObj"
			 :timeObj.sync="timeObj"
			 @filterd="filterd"
			 
			/>
		</view>
		<view class="filter" v-if="params.contractSource">
			<view class="filter-item">
				<view class="filter-item-label">日期筛选</view>
				<view class="filter-item-content">
					<view style="position: relative;" :class="['tag', 'date', filter.dateType == 4 ? 'act' : '']" @click="filterFuc">
						{{ filter.dateType == 4 ? filter.startTime + ' 至 ' + filter.endTime : '自定义日期' }}
						<uni-icons :color="filter.dateType == 4 ? '#0091ff' : '#999999'" style="position: absolute;right:4rpx" type="forward"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="cont_top" v-if="listData.length > 0" >
			<text>共<text style="color:#0091ff;">{{totalObj.contractCounts}}</text>个合同</text>
			<text><text style="color:#0091ff;">{{totalObj.buildingCounts}}</text>个项目</text>
			<text><text style="color:#0091ff;">{{totalObj.elevatorCounts}}</text>台电梯</text>
		</view>
		<view class="card_cont" v-for="(item,i) in listData" :key="i">
			<view class="cont_num">
				<view>合同编号:</view>
				<view>{{item.contractNo || '--'}}</view>
			</view>
			<view class="cont_num">
				<view>单位名称:</view>
				<view>{{item.customerUnit || '--'}}</view>
			</view>
			<view class="cont_time">
				<view>合同金额:</view>
				<view>￥{{item.contractCost || '--'}}</view>
			</view>
			<view class="cont_time">
				<view>服务时间:</view>
				<view>{{restElevatorTimes(item.contractBeginTime,item.contractEndTime)}}</view>
			</view>
			<view class="cont_item">
				<view class="item_LR" @click="openClick(item)">
					<view class="item_L">
						<text><text style="color:#0091ff;">{{item.buildingInfo.length}}</text>个项目</text>
						<text><text style="color:#0091ff;">{{restElevatorCount(item.buildingInfo)}}</text>台电梯</text>
					</view>
					<view class="item_R">
						<view style="" >{{item.show?'收起':'展开'}}</view>
						<view :style="{transform:item.show?'rotate(45deg)':'rotate(-135deg)','margin-top':item.show?'5px':'0px'}"></view>
					</view>
				</view>
				<view class="item_elevator" v-if="item.show">
					<view class="elevator_text" v-for="(pro,a) in item.buildingInfo" :key="a">
						<view>{{pro.buildingName || "--"}}</view>
						<view>{{pro.elevatorCounts}}台电梯</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="emptyData" v-if="listData.length === 0" >暂无数据</view>
		<view v-show="isLoadMore" ><uni-load-more :status="loadStatus"></uni-load-more></view>
		<view class="" style="height: 50rpx;"></view>
		
		<!-- 日期筛选 -->
		<time-select :beforeToday="false" :atterToday="true" v-if="selectTimePopup" @close="closeSelectTimePopup"></time-select>
		<previewMedia ref="previewMedia"></previewMedia>
	</view>
</template>

<script>
import filterModel from './components/filter-model.vue';
import {getContractDetailList,getContractTotalCount} from '@/apis/contract.js';
import UniLoadMore from '@/components/uni-load-more/uni-load-more';
import timeSelect from '@/pages/index/components/timeSelect.vue';
import { getNowTime,removeEmpty } from '@/utils/utils.js';
	
export default {
	name:'contractDetail',
	components:{
		filterModel,
		timeSelect
	},
	data() {
		return {
			selectTimePopup:false,
			showFilter:false,
			allFilter:false,
			disabledFilter:false,
			parentObj:{},
			listData:[],
			objPage:{},
			totalPage:0,
			params:{
				current:1,
				size:10,
				contractSource:'',
				contractStatus:'',
				contractExtStatus:'',
				status:'',
				beginTime:'',
				endTime:''
			},
			filter: {
				dateType: 1,
				startTime: '',
				endTime: ''
			},
			timeObj:{},// 筛选的时间
			totalObj:{},
			isLoadMore:false,
			loadStatus:''
		};
	},
	computed:{
			
	},
	onLoad(opt) {
		if (opt.obj) {
			this.showFilter = true;
			let objs = JSON.parse(opt.obj);
			this.params[objs.type] = Number(objs.status);
			if (objs.type === 'contractSource') {// 合同来源添加日期
				this.params.beginTime = objs.beginTime + ' 00:00:00';
				this.params.endTime = objs.endTime + ' 23:59:59';
				this.filter.startTime = objs.beginTime;
				this.filter.endTime = objs.endTime;
				this.filter.dateType = 4;
			}
			this.parentObj = {// 处理初始时 合同筛选属性同名
				[objs.type === 'contractStatus' ? 'contractStatuss' : objs.type]:[Number(objs.status)],
			};
			this.timeObj = {
				beginTime: objs.beginTime,
				endTime: objs.endTime,
			};
			this.initData();
			this.initTotalCount();
		}
	},
	
	methods:{
		initData() {
			uni.showLoading({
				title:'加载中'
			});
			this.loadStatus = 'loading';
			getContractDetailList(removeEmpty(this.params)).then(res=>{
				if (res.code === 200) {
					uni.hideLoading();
					const datas = res.data.records;
					this.totalPage = res.data.total;
					this.listData = this.listData.concat(datas);
					if (datas.length < this.params.size) {
						this.isLoadMore = true;
						this.loadStatus = 'noMore';
					} else {
						this.isLoadMore = false;
					}
					if (this.params.current === 1) {// 第一页不显示更多文字
						this.isLoadMore = false;
					} else {
						if (datas.length > this.params.size) {
							this.isLoadMore = true;
						}
					}
				}
			});
		},
		// 获取合同总数
		initTotalCount() {
			let paramsObj = Object.assign({},this.params);
			delete paramsObj.size;
			delete paramsObj.current;
			for (let pro in paramsObj) {
				for (let attr in this.params) {
					if (pro == attr) {
						paramsObj[pro] = this.params[attr];
					}
				}
			}
			getContractTotalCount(removeEmpty(paramsObj)).then(res=>{
				if (res.code === 200) {
					this.totalObj = res.data || {};
				}
			});
		},
			
		restElevatorCount(list = []) {
			let str = 0;
			if (list.length > 0) {
				list.map(item=>{
					str += item.elevatorCounts;
				});
			}
			return str;
		},
		restElevatorTimes(start = '',end = '') {
			let sDate = '',eDate = '';
			if (start && end) {
				sDate = start.substring(0,10).replace(/[-]/g,'/') + '-';
				eDate = end.substring(0,10).replace(/[-]/g,'/');
			}
			return sDate + eDate;
		},
		// 自定义日期
		filterFuc(key, val) {
			this.selectTimePopup = true;
		},
		// 自定义日期
		closeSelectTimePopup(res) {
			let start = '';
			let end = '';
			if (res) {
				console.log('自定义日期', res);
				if (res.indexOf('-') != -1) {
					const timeArr = res.split('-');
					start = timeArr[0].replaceAll('.', '-');
					end = timeArr[1].replaceAll('.', '-');
				} else {
					const time = res.replaceAll('.', '-');
					start = time;
					end = time;
				}
				const nowDay = getNowTime();
				let nowtime = new Date(nowDay).getTime();
				let starttime = new Date(start).getTime();
				let endtime = new Date(end).getTime();
				if (endtime > nowtime) {
					console.log('包含今天');
					uni.showToast({
						title: '自定义日期范围须小于今天',
						icon: 'none'
					});
					return;
				}
			
				this.filter.startTime = start;
				this.filter.endTime = end;
				this.filter.dateType = 4;
				this.params.beginTime = this.filter.startTime + ' 00:00:00';
				this.params.endTime = this.filter.endTime + ' 23:59:59';
				this.params.current = 1;
				this.params.size = 10;
				this.listData = [];
				this.timeObj = {beginTime:start,endTime:end};
				this.initData();
				this.initTotalCount();
			} 
			this.selectTimePopup = false;
		},
		onReachBottom() {
			if (!this.isLoadMore) {
				this.isLoadMore = true;
				this.params.current += 1;
				this.initData();
			}
		},
		openClick(obj) {
			for (let i = 0; i < this.listData.length; i++) {
				if (obj.id === this.listData[i].id) {
					this.listData[i].show = !this.listData[i].show;
				}
			}
			this.$forceUpdate();
		},
		// 筛选器
		filterd(res) { 
			let {choosed,allChecked} = res; 
			this.listData = [];
			this.params = {};
			this.params.current = 1;
			this.params.size = 10;
			if (!allChecked) {
				for (let attr in choosed) {
						 this.params[attr] = choosed[attr].join(',');
						 if (attr === 'contractSource' && this.filter.startTime) {
						this.params.beginTime = this.filter.startTime + ' 00:00:00';
						this.params.endTime = this.filter.endTime + ' 23:59:59';
						 } else {
						this.filter.dateType = 1; // 清空自定义时间
						 }
				}
			}
				
			this.initData();
			this.initTotalCount();
		}
	}
};
</script>

<style>
	page {
		background: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.contract_wrapper{
		.emptyData{
			margin: 20rpx auto;
			width: 680rpx;
			text-align: center;
			color: #999999;
			
		}
		.cont_filterModel{
			background: #fff;
			height: 76rpx;
			line-height: 76rpx;
		}
		.cont_top{
			width: 680rpx;
			margin: 15rpx auto;
			font-size: 24rpx;
			text-align: left;
			color: #999999;
			text:nth-of-type(2){
				display: inline-block;
				border-left:2rpx #ccc solid;
				border-right:2rpx #ccc solid;
				margin: 0 10rpx;
				padding: 0 10rpx;
			}
		}
		.card_cont{
			width: 680rpx;
			margin: 0 auto;
			background: #ffffff;
			border-radius: 8rpx;
			padding:24rpx 20rpx;
			margin-bottom: 20rpx;
			.cont_num{
				margin-bottom: 10rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				display: flex;
				view:nth-of-type(1){
					flex: 0 0 120rpx;
				}
				view:nth-of-type(2){
					text-overflow: ellipsis;
					white-space:nowrap;
					overflow: hidden;
					flex: 1;
				}
			}
			.cont_time{
				margin-bottom: 10rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				display: flex;
				view:nth-of-type(1){
					flex: 0 0 120rpx;
				}
				view:nth-of-type(2){
					text-overflow: ellipsis;
					white-space:nowrap;
					overflow: hidden;
					flex: 1;
				}
			}
			.cont_item{
				.item_LR{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.item_L{
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin-top: 10rpx;
						text:nth-of-type(2){
							display: inline-block;
							border-left: 2rpx #ccc solid;
							margin-left: 10rpx;
							padding-left: 10rpx;
						}
					}
					.item_R{
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						display: flex;
						justify-content: center;
						align-items: center;
						view:nth-of-type(2){
							transition: 0.3s all;
							width: 14rpx;
							height: 14rpx;
							border-left: 2rpx #ccc solid;
							border-top: 2rpx #ccc solid;
							transform: rotate(45deg);
							margin: 0 10rpx;
						}
					}
					
				}
				.item_elevator{
					background: #f8f8f8;
					padding: 20rpx;
					margin-top: 20rpx;
					.elevator_text{
						display: flex;
						flex-direction: row;
						margin-bottom: 10rpx;
						// transition: all 0.3s;
						view:nth-of-type(1){
							flex: 0 0 500rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #333333;
							text-overflow: ellipsis;
							white-space:nowrap;
							overflow: hidden;
						}
						view:nth-of-type(2){
							flex: 1;
							text-align: right;
							font-size: 24rpx;
							font-weight: 400;
							color: #666666;
						}
					}
					.elevator_text:last-child{
						margin-bottom: 0;
					}
				}
			}
		}
		.filter {
			width: 100%;
			border-top: 2rpx #eee solid;
			&-item {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				// padding-top: 20rpx;
				background: #fff;
				&-label {
					width: 17%;
					margin-left: 20rpx;
					font-size: 26rpx;
					font-weight: 600;
					color: #333333;
				}
				&-content {
					width: 80%;
					display: flex;
					margin: 15rpx 0;
					margin-right: 20rpx;
					
					.tag {
						width: 166rpx;
						text-align: center;
						// flex: 1;
						background: #f3f6f8;
						border-radius: 8rpx;
						height: 48rpx;
						line-height: 47rpx;
						font-size: 24rpx;
						color: #333;
						border: 2rpx solid #f3f6f8;
						font-weight: normal;
						transition: 0.3s all;
					}
		
					.tag:nth-child(2) {
						margin: 0 16rpx;
					}
					.date {
						flex: 1;
						color: #999999;
					}
					.act {
						border: 2rpx solid #0091ff;
						background-color: #eef8ff;
						color: #0091ff;
					}
				}
			}
		}
		
	}
</style>